<template>
  <div>
    <div class="mvlists" ref="mvlists">
      <ul>
        <li v-for="(item, index) in mvList" :key="index">
          <div class="imgs" v-show="playIn != index" @click="getUrlShow(index, item.id)"
            :style="{ 'background-image': 'url(' + item.cover + ')' }">
            <span class="iconfont icon-bofang"></span>
          </div>
          <div class="imgs" v-show="playIn == index" :style="{ 'background-color': '#fff' }" @click="mvPause(item.id)">
            <video :src="item.mvurl" @loadeddata="loadeddataFun" :ref="item.id"></video>
          </div>
          <p>
            {{ item.name }}
          </p>
        </li>
      </ul>
      <h3 class="NotData" v-show="NotData">没有更多数据...</h3>
    </div>
  </div>
</template>

<script>
import { getMVList, getMVUrl } from "@/api/mv";
export default {
  data() {
    return {
      offset: 0,
      mvList: [],
      playIn: null, //当前播放视频下标
      flag: true, //防止多次请求数据
      NotData: false,
    };
  },
  created() {
    getMVList({
      limit: 20,
      offset: this.offset,
    }).then((data) => {
      console.log(data);
      this.mvList = data.data;
    });
  },
  methods: {
    getUrlShow(index, id) {
      this.playIn = index;
      if (!this.mvList[index].mvurl) {
        // 请求视频链接
        getMVUrl({ id: id }).then((data) => {
          this.$set(this.mvList[index], "mvurl", data.data.url);
        });
      } else {
        this.$refs[id][0].play(); //暂停播放
      }
    },
    loadeddataFun(event) {
      event.target.play();
    },
    mvPause(id) {
      console.log(this, id);
      this.$refs[id][0].pause(); //暂停播放
      this.playIn = null; //暂停播放
    },
    // 添加数据方法
    addData() {
      if (this.flag && !this.NotData) {
        this.flag = false;
        this.offset += 20;
        getMVList({
          limit: 20,
          offset: this.offset,
        }).then((data) => {
      
          if (data.data.length) {
            this.mvList = this.mvList.concat(data.data);
            this.flag = true;
          } else {
            this.NotData = true;
          }
        });
      }
    },
    // 滚动条监听事件
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop; //滚动位置
      let lis = this.$refs.mvlists.getElementsByTagName("li");
      let num = lis.length;
      let liHeight = lis[num - 3].offsetTop;
      if (scrollTop > liHeight) {
        //添加数据
        this.addData();
      }
    },
  },
  watch: {
    playIn(newValue, oldValue) {
      if (oldValue != null) {
        let id = this.mvList[oldValue].id;
        this.$refs[id][0].pause(); //暂停播放
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener("scroll", this.handleScroll);
    });
  },
  beforeDestroy() {
      window.removeEventListener("scroll", this.handleScroll);
      let id = this.mvList[this.playIn].id;
      this.$refs[id][0].pause(); //暂停播放
      this.playIn = null; //暂停播放
    

  },
};
</script>

<style lang="scss" >

.mvlists {
  width: 100%;
  li {
    .imgs {
      width: 100%;
      height: 211px;
      background-repeat: no-repeat;
      background-size: contain;
      position: relative;

      span {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
          bottom: 0px;
          margin: auto;
          width: 60px;
          height: 60px;
          text-align: center;
          line-height: 60px;
          background: rgba(0, 0, 0, 0.5);
          border-radius: 50%;
          color: #fff;
          font-size: 24px;
        }
        
        video {
          height: 211px;
          margin: 0 auto;
          display: block;
        }
        }
        
        p {
          font-size: 14px;
          padding: 10px;
          background-color: aliceblue;
          margin-bottom: 10px;
        }
        }
        
        .NotData {
          text-align: center;
          height: 40px;
          line-height: 40px;
          color: #a6a6a6;
        }
        }
</style>